<%@ page import="net.ifilm.entity.SlideFilm" %>
<%@ page import="java.util.List" %>
<%@ page import="net.ifilm.entity.PageCount" %>
<%@ page import="net.ifilm.utility.DateTimeUtil" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    PageCount pageCount = (PageCount)request.getAttribute("pageCount");
%>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/bg/css/bg.css" type="text/css" />
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/ifilm.js"></script>
    <style type="text/css">
        #livetip {
            position: absolute;
            background-color: #000000;
            padding: 4px;
            border: 2px solid #000000;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
        }
        td img { cursor:pointer; }
        table tr:hover {
            background-color: #87ceeb;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');
            var tipTitle = '';
            $('#filmTable').bind('mouseover mouseout mousemove', function(event) {
                var $link = $(event.target).closest('a');
                if (!$link.length) { return; }
                var link = $link[0];
                if (event.type == 'mouseover' || event.type == 'mousemove') {
                    $liveTip.css({
                        top: event.pageY + 12,
                        left: event.pageX + 12
                    });
                };
                if (event.type == 'mouseover') {
                    tipTitle = link.title;
                    link.title = '';

                    $liveTip.html('<div><img src="' + tipTitle + '" width="300" height="86"/></div>').show();
                };
                if (event.type == 'mouseout') {
                    $liveTip.hide();
                    if (tipTitle) {
                        link.title = tipTitle;
                    };
                };
            });
        }); // end of $(function()

        function addSlideFilm() {
            window.showModalDialog("addSildeFilm.jsp");
        }

        function changeActiveFlag(filmId, value) {
            $.ajax({type:'POST', url:'changeActiveFlag.html', data:'filmId=' + filmId + '&activeFlag=' + value});
        }
    </script>
</head>
<body>

    <div id="listDiv">
    <div id="message"></div>
    <table id="filmTable">
        <col width="3%">
        <col width="20%">
        <col width="20%">
        <col width="10%">
        <col width="15%">
        <col width="5%">
        <thead>
        <tr>
            <th align="center">ID</th>
            <th>电影标题</th>
            <th>海报路径</th>
            <th>启用?</th>
            <th>创建时间</th>
            <th>控制</th>
        </tr>
        </thead>
        <tbody>
            <%
                List<SlideFilm> slideFilmList = (List<SlideFilm>)request.getAttribute("slideFilmList");
                for (SlideFilm slideFilm : slideFilmList) {
            %>
                <tr>
                    <td align="center" style="background-color: #808080;"><%=slideFilm.getFilmId()%></td>
                    <td><%=slideFilm.getFilm().getFilmName()%></td>
                    <td><a href="javascript:void(0);" title="<%=slideFilm.getPicturePath()%>"><%=slideFilm.getPicturePath()%></a></td>
                    <td align="center">
                        <select onchange="changeActiveFlag(<%=slideFilm.getFilmId()%>, this.value);">
                            <option value="0" <%=slideFilm.getActiveFlag()==0?"selected":""%>>是</option>
                            <option value="1" <%=slideFilm.getActiveFlag()==1?"selected":""%>>否</option>
                        </select>
                    </td>
                    <td><%=DateTimeUtil.parseCreateTime(slideFilm.getCreateTime())%></td>
                    <td align="center">
                        <img src="/images/delete.png"
                             onclick="location.href='delSlideFilmById.html?filmId=<%=slideFilm.getFilmId()%>&page=<%=pageCount.getCurrentPage()%>'"/>
                    </td>
                </tr>
            <%
                }
            %>
        </tbody>
    </table>

        <div id="pannel">
            <a href="javascript:addSlideFilm();" class="someClass" title="增加新的电影纪录">+</a>
        </div>

    <div id="control">
        <%
            int currentPage = pageCount.getCurrentPage();
            int totalPages = pageCount.getTotalPage();
        %>
        <a href="javascript:location.href='slideFilmList.html?page=1'" class="someClass" title="跳转到首页"><<</a>
        <% if (currentPage == 1) { %>
        <a href="javascript:void(0);" style="background-color: #808080;"><</a>
        <% } else { %>
        <a href="javascript:location.href='slideFilmList.html?page=<%=currentPage - 1%>'" class="someClass" title="跳转到上一页"><</a>
        <% } %>
        <label><%=currentPage%>,<%=totalPages%> 页</label>
        <% if (currentPage == totalPages){ %>
        <a href="javascript:void(0);" style="background-color: #808080;">></a>
        <% } else { %>
        <a href="javascript:location.href='slideFilmList.html?page=<%=currentPage + 1%>'" class="someClass" title="跳转到下一页">></a>
        <% } %>
        <a href="javascript:location.href='slideFilmList.html?page=<%=totalPages%>'" class="someClass" title="跳转到尾页">>></a>

        <div>
            跳转到
            <select onchange="location.href = 'slideFilmList.html?page=' + this.value">
                <% for (int i = 1; i <= totalPages; i++) { %>
                <option value="<%=i%>" <%=currentPage==i?"selected":""%>><%=i%>页</option>
                <% } %>
            </select>
        </div>
    </div>
</div>

</body>
</html>